<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影管理</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-radio-group v-model="queryData.mode" size="mini">
                <el-radio-button label="搜索"></el-radio-button>
                <el-radio-button label="条件查询"></el-radio-button>
            </el-radio-group>
            <br>
            <br>
            <el-card shadow="hover">
                <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="queryData.input"
                        size="small"
                        @change="movies.current = 1;queryFile();"
                        style="width:900px"
                        v-if="queryData.mode=='搜索'">
                </el-input>
                <div v-if="queryData.mode=='条件查询'">
                    地区：
                    <el-select
                            @change="movies.current = 1;queryFile();"
                            v-model="queryData.area" filterable placeholder="请选择" size="small" style="margin-right: 20px">
                        <el-option
                                v-for="item in areas"
                                :key="item"
                                :value="item">
                        </el-option>
                    </el-select>
                    类型：
                    <el-select
                            @change="movies.current = 1;queryFile();"
                            v-model="queryData.type" filterable placeholder="请选择" size="small" style="margin-right: 20px">
                        <el-option
                                v-for="item in types"
                                :key="item"
                                :value="item">
                        </el-option>
                    </el-select>
                    时间：
                    <el-date-picker
                            v-model="queryData.time"
                            type="year"
                            size="small"
                            @change="movies.current = 1;queryFile();"
                            placeholder="请选择">
                    </el-date-picker>
                    状态：
                    <el-select
                            @change="movies.current = 1;queryFile();"
                            v-model="queryData.status" filterable placeholder="请选择" size="small" style="margin-right: 20px">
                        <el-option
                                v-for="item in status"
                                :key="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
            </el-card>
        </div>
        <el-table
                :data="movies.records"
                border
                style="width: 100%;border-radius: 10px">
            <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    width="100">
            </el-table-column>
            <el-table-column
                    fixed
                    label="图片"
                    width="90
">
                <div slot-scope="scope">
                    <el-image
                            style="width: 80px;height: 100px;"
                            :src="'../'+scope.row.img">
                    </el-image>
                </div>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="片名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="时间"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="area"
                    label="地区"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="length"
                    label="时长"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="director"
                    label="导演"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="actor"
                    label="演员"
                    width="400"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="introduce"
                    label="简介"
                    width="400"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.status==0?"下映":scope.row.status==1?"即将上映":"上映中"}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" :disabled="scope.row.status==0?false:true" @click="open(scope.row,'即将上映')">即将上映</el-button>
                    <el-button size="mini" type="danger" :disabled="scope.row.status==1?false:true" @click="open(scope.row,'下映')">下映</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;padding-top: 10px">
            <el-pagination
                    v-if="movies.total>8"
                    style="margin: auto"
                    background
                    :current-page="movies.current"
                    :page-size="movies.size"
                    layout="prev, pager, next"
                    @current-change="pageChange"
                    :total="movies.total">
            </el-pagination>
        </div>
    </el-card>
</div>



<script>
    var v = new Vue({
        el:"#app",
        data:{
            areas:["全部","中国大陆","日本","美国","韩国","中国香港","中国台湾","墨西哥","加拿大",
                "丹麦","意大利","尼日利亚","印度 ","爱尔兰","西班牙","印度尼西亚","德国","荷兰","新加坡",
                "哥伦比亚","土耳其","比利时","澳大利亚","芬兰","瑞士","阿根廷","匈牙利","俄罗斯"],
            types:["全部","剧情","喜剧","动画","奇幻","爱情","演唱会","真人秀 ","脱口秀",
                "歌舞","冒险","科幻","音乐","家庭","恐怖","惊悚","纪录","灾难","西部",
                "动作","纪录片","历史","传记","儿童","古装","武侠"],
            status:["全部","上映中","即将上映","下映"],
            queryData:{ mode:"搜索", input:"",area:"",type:"",time:"",status:""},
            value:"",
            input:"",
            movies:{current:1,size:8,records:[]}
        },
        methods:{
            queryFile(){
                axios.post(`../movie/queryFile?current=${this.movies.current}&size=${this.movies.size}`,this.queryData).then(res=>{
                    this.movies = res.data;
                });
            },
            pageChange(page){
                this.movies.current = page;
                this.queryFile();
            },
            update(id,status){
                axios.post(`../movie/updateStatus?id=${id}&status=${status}`).then(res=>{
                    if(res.data.code == 1){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.queryFile();
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            },
            open(item,msg) {
                this.$confirm(`将${item.name}的状态修改为${msg}, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (msg == "即将上映") {
                        this.update(item.id,1);
                    }else{
                        this.update(item.id,0);
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            }
        },
        created(){
            this.queryFile();
        }
    })
</script>
</body>
</html>